<template>
  <a-button type="primary" @click="onClick" :disabled="isAdding">新增</a-button>
</template>
<script setup>
import { ref } from 'vue'
import { useVModel } from '@vueuse/core'
import { removeStructTable } from '@/api/db.js'
/**
 * 外部参数
 */
let props = defineProps({
  data: {
    type: Array,
    required: true,
  },
  columns: {
    type: Array,
    required: true,
  },
  isAdding: {
    type: Boolean,
    required: true,
  },
})
/**
 * 事件定义
 */
let emit = defineEmits(['update:data', 'update:isAdding'])
/**
 * 双向绑定
 */
let data = useVModel(props, 'data', emit)
let isAdding = useVModel(props, 'isAdding', emit)

/**
 * 操作
 */
function onClick() {
  if (isAdding.value) {
    isAdding.value = false
    data.value.shift() // 删除新增行
    return
  }

  isAdding.value = true
  let item = { editing: true, loading: false, isNew: true }
  props.columns.forEach(column => {
    if (column.key.startsWith('row')) {
      item[column.key] = ''
    }
  })
  data.value.unshift(item)
}
</script>
<style lang="less" scoped></style>
